<template>
    <div class="relative overflow-hidden draggable-container">
        <Vue3DraggableResizable
            class="draggableResizable"
            v-loading="progress.value < 100"
            element-loading-custom-class="jr-el-loading"
            element-loading-text="loading"
            :element-loading-spinner="loadingSvg"
            element-loading-background="rgba(255,255,255,.4)"
            :parent="true"
            :active="true"
            :draggable="true"
            :resizable="true"
            :initW="700"
            :initH="900"
            :minW="700"
            :minH="500"
            :handles="['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml']"
            @drag-start="print"
            :disable-user-select="false"
            :drag-handle="'.drag-handle-main'"
        >
            <el-card
                v-if="progress.value >= 100"
                class="bg-primarylight dialog-header-bg flex flex-col h-full"
                header-class="pl-[0] pb-[0]"
                body-class="bg-img1 py-[5px] flex-1 overflow-hidden"
            >
                <template #header>
                    <div
                        class="drag-handle-main flex items-center f-1 mr-[10px] h-[49px] cursor-move"
                        @mousedown="onHeaderMouseDown"
                    >
                        <img
                            src="../../../assets/img-logo.png"
                            class="max-w-[39px] ml-[16px]"
                            alt=""
                        />
                        <span class="text-primary text-[20px] ml-[10px]"
                            >天钥智能主检引擎</span
                        >
                    </div>
                </template>

                <div
                    class="px-[10px] flex flex-col h-full"
                    @mousedown="onBodyMouseDown"
                >
                    <div
                        class="bg-white pt-[5px] rounded-md text-[16px] min-h-[60px]"
                    >
                        <div class="flex items-center justify-around">
                            <div class="flex-[1] shrink-0 ml-[10px]">
                                <span>姓名：</span
                                ><span>{{
                                    zhinengtijianData?.PatientData?.PatientName
                                }}</span>
                            </div>
                            <div class="flex-[1] shrink-0">
                                <span>性别：</span
                                ><span>{{
                                    zhinengtijianData?.PatientData
                                        ?.PatientGenderExp
                                }}</span>
                            </div>
                            <div class="flex-[1] shrink-0">
                                <span>年龄：</span
                                ><span>{{
                                    zhinengtijianData?.PatientData?.PatientAge
                                }}</span>
                            </div>
                            <div class="flex-[1] shrink-0">
                                <span>体检号：</span
                                ><span>{{
                                    zhinengtijianData?.PatientData
                                        ?.HealthCheckupCode
                                }}</span>
                            </div>
                        </div>

                        <div
                            v-if="zhinengtijianData?.HistoryLabels?.length"
                            class="history mx-[10px] mb-[3px] mt-[7px]"
                        >
                            <div v-if="isShowHistory" class="flex flex-wrap">
                                <div
                                    class="text-[10px] text-color333 px-[12px] border border-[#bbbbbb] rounded-[5px] mr-[10px]"
                                    v-for="hisItem in zhinengtijianData?.HistoryLabels"
                                >
                                    {{ hisItem }}
                                </div>
                            </div>
                            <div
                                class="text-center text-[12px] text-color333/55 leading-[22px] mt-[10px]"
                            >
                                <div
                                    class="inline-block cursor-pointer"
                                    @click="isShowHistory = !isShowHistory"
                                >
                                    {{ isShowHistory ? '收起' : '展开' }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 总检结论操作 -->
                    <div
                        class="flex items-center justify-between pl-[5px] py-[5px] pt-[10px]"
                    >
                        <div class="flex items-center">
                            <el-checkbox
                                class="mr-[10px]"
                                v-model="allChecked"
                                :disabled="handleDisabled"
                                @change="doChangeCheckAll"
                            ></el-checkbox>
                            <span class="font-semibold mr-[5px]">总检结论</span>
                            <el-button
                                class="text-primary"
                                :class="
                                    handleDisabled
                                        ? 'disabled:text-primary/50'
                                        : ''
                                "
                                text
                                size="small"
                                :disabled="handleDisabled"
                                @click="doAllToggle"
                                >{{ toggleOpen ? '收起全部' : '展开全部'
                                }}<span
                                    class="icon-[teenyicons--down-small-outline] transform text-[18px]"
                                    :class="toggleOpen ? '' : ' rotate-180'"
                                ></span
                            ></el-button>
                        </div>

                        <div>
                            <el-button
                                plain
                                size="small"
                                type="primary"
                                :disabled="handleDisabled"
                                @click="doReset"
                                >全部重置</el-button
                            >
                            <el-button
                                plain
                                size="small"
                                type="primary"
                                :disabled="handleDisabled"
                                @click="doAdd(undefined)"
                                >新增结果</el-button
                            >
                            <el-button
                                plain
                                size="small"
                                type="primary"
                                :disabled="handleDisabled"
                                @click="doFanKui"
                                >反馈</el-button
                            >
                            <el-button
                                plain
                                size="small"
                                type="primary"
                                :disabled="handleDisabled"
                                @click="doMerge"
                                >合并</el-button
                            >
                            <el-dropdown
                                class="ml-[10px]"
                                size="small"
                                :disabled="handleDisabled"
                                @command="doCopy"
                            >
                                <el-button
                                    class="outline-none"
                                    :disabled="handleDisabled"
                                    type="primary"
                                    size="small"
                                >
                                    复制
                                    <el-icon> <arrow-down /> </el-icon
                                ></el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item command="all"
                                            >复制全部</el-dropdown-item
                                        >
                                        <el-dropdown-item command="result"
                                            >复制体检结果</el-dropdown-item
                                        >
                                        <el-dropdown-item command="healthy"
                                            >复制健康建议</el-dropdown-item
                                        >
                                        <el-dropdown-item command="judge"
                                            >复制判断依据</el-dropdown-item
                                        >
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>

                    <!-- 体检各项 -->
                    <div
                        v-if="zhinengtijianData?.ItemList?.length"
                        class="rounded-md px-[3px] pt-[5px] overflow-y-auto overflow-x-hidden flex-1"
                        @mousedown="onBodyMouseDown"
                    >
                        <!-- 优化后的 draggable 组件 -->
                        <draggable
                            v-model="zhinengtijianData.ItemList"
                            item-key="ID"
                            :handle="'.drag-handle-item'"
                            :filter="'.no-drag'"
                            :prevent-on-filter="false"
                            @start="onDragStart"
                            @end="onDragEnd"
                            @change="onDragChange"
                            :force-fallback="true"
                            :fallback-class="'sortable-fallback'"
                            :fallback-on-body="true"
                            :fallback-tolerance="5"
                            ghost-class="sortable-ghost"
                            chosen-class="sortable-chosen"
                            drag-class="sortable-drag"
                            :animation="300"
                            :easing="'cubic-bezier(0.4, 0, 0.2, 1)'"
                            :scroll="true"
                            :scroll-sensitivity="100"
                            :scroll-speed="20"
                            :dragover-bubble="true"
                        >
                            <div
                                v-for="(
                                    item, index
                                ) in zhinengtijianData.ItemList"
                                class="item-container border border-bordergraylight rounded-md overflow-hidden mb-[6px] shadow-[3px_3px_5px_0px_rgba(15,64,245,0.15)] transition-all duration-300 ease-out transform"
                                :class="{
                                    'dragging-item':
                                        isDragging &&
                                        currentDraggingItem === item.ID
                                }"
                            >
                                <!-- card-header -->
                                <div
                                    class="drag-handle-item bg-white flex justify-between px-[8px] py-[5px] border-b border-b-bordergraylight cursor-move transition-all duration-200"
                                    @mousedown="onItemDragHandleMouseDown"
                                >
                                    <div class="flex items-center flex-1">
                                        <span
                                            class="icon-[material-symbols--drag-pan] text-primary text-[22px] mr-[5px] transition-transform duration-200"
                                        ></span>
                                        <el-checkbox
                                            class="mr-[15px] no-drag"
                                            v-model="item.isChecked"
                                            @mousedown.stop
                                        ></el-checkbox>
                                        <template v-if="item.isEdit">
                                            <div
                                                class="no-drag flex items-center font-semibold mr-[5px] flex-1 px-[10px]"
                                            >
                                                {{ index + 1 }}.<el-input
                                                    v-model="item.LabelName2"
                                                    @mousedown.stop
                                                ></el-input>
                                            </div>
                                        </template>
                                        <template v-else>
                                            <div class="flex items-center">
                                                <div
                                                    class="no-drag font-semibold mr-[5px] px-[10px] shrink-0"
                                                >
                                                    {{ index + 1 }}.{{
                                                        item.LabelName
                                                    }}
                                                </div>
                                                <div>
                                                    <div
                                                        v-for="(
                                                            tag, tagindex
                                                        ) in item.LabelValues"
                                                        :key="tagindex"
                                                        class="mr-[5px] h-[20px] leading-[20px] inline-block bg-primarylight2/70 text-white font-semibold rounded-lg px-[12px] my-[2px] text-[12px]"
                                                        type="primary"
                                                        size="small"
                                                    >
                                                        {{ tag }}
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                    <div
                                        class="text-primary flex items-center ml-[10px] no-drag"
                                    >
                                        <span
                                            class="cursor-pointer shrink-0"
                                            @click="doEdit(item)"
                                            @mousedown.stop
                                            >{{
                                                item.isEdit ? '保存' : '编辑'
                                            }}</span
                                        >
                                        <span
                                            v-if="item.isEdit"
                                            class="ml-[5px] cursor-pointer shrink-0"
                                            @click="doCancel(item)"
                                            @mousedown.stop
                                            >取消</span
                                        >
                                        <span
                                            class="icon-[teenyicons--down-small-outline] transform text-[26px] cursor-pointer ml-[5px]"
                                            :class="{
                                                'rotate-180': item.isOpen
                                            }"
                                            @click="item.isOpen = !item.isOpen"
                                            @mousedown.stop
                                        ></span>
                                    </div>
                                </div>

                                <!-- card-content -->
                                <div
                                    class="overflow-hidden bg-white no-drag transition-all duration-300 ease-out"
                                    :class="{ 'h-0': !item.isOpen }"
                                >
                                    <MetaForm
                                        :formData="item.formData"
                                        :formColumn="item.formColumn"
                                        :labelWidth="70"
                                        labelPosition="right"
                                        class="mx-[7px] mt-[10px] -mb-[10px]"
                                    >
                                    </MetaForm>
                                    <!-- card-footer -->
                                    <div
                                        class="bg-white text-[12px] flex pr-[10px] py-[5px] border-t border-t-gray leading-[14px]"
                                    >
                                        <div
                                            class="w-[70px] text-right shrink-0"
                                        >
                                            判断依据:
                                        </div>
                                        <div
                                            class="flex-1 leading-[16px] pl-[5px]"
                                        >
                                            {{ item.formData.Reason }}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </draggable>
                    </div>
                    <div v-else class="text-center mt-[120px]">
                        <div
                            class="font-semibold text-[16px] leading-[24px] mb-[10px]"
                        >
                            体检报告中仍有部分项目的报告待出
                        </div>
                    </div>
                </div>
            </el-card>
        </Vue3DraggableResizable>
    </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { computed, inject, ref, watch } from 'vue'
import { VueDraggableNext as draggable } from 'vue-draggable-next'
import useClipboard from 'vue-clipboard3'
import {
    SaveKnowledgeItemDataAsyncApi,
    UpdateOrderByAsyncApi
} from '@/api/home'
import { useLoadingStore } from '@/stores/loading'
import { loadingSvg } from '@/common/index.js'

// 初始化剪贴板工具
const { toClipboard } = useClipboard()
const loadingStore = useLoadingStore()

const isShow = ref(false)
const allChecked = ref(false)
const toggleOpen = ref(true)
const isShowHistory = ref(true)
const originalOrder = ref([]) // 保存原始顺序
const isDragging = ref(false) // 拖拽状态
const currentDraggingItem = ref(null) // 当前拖拽的项目ID

const emits = defineEmits(['openFanKui', 'openEdit', 'openReset'])

const getZhiJjianDetail = inject('getZhiJjianDetail')
const zhinengtijianData = inject('zhinengtijianData')
const progress = inject('progress')

const handleDisabled = computed(() => {
    return !zhinengtijianData.value?.ItemList?.length
})

// 头部鼠标按下事件
const onHeaderMouseDown = (e) => {
    console.log('Header mouse down - should drag whole component')
}

// 内容区域鼠标按下事件
const onBodyMouseDown = (e) => {
    e.stopPropagation()
}

// 内部拖拽手柄鼠标按下事件
const onItemDragHandleMouseDown = (e) => {
    e.stopPropagation()
}

// 拖拽开始 - 保存原始顺序
const onDragStart = (evt) => {
    isDragging.value = true
    currentDraggingItem.value = evt.item.__draggable_context__.element.ID
    originalOrder.value = [
        ...zhinengtijianData.value.ItemList.map((item) => item.ID)
    ]
    console.log('Drag start, original order:', originalOrder.value)
}

// 拖动过程中
const onDragChange = (evt) => {
    // 可以在这里添加拖拽过程中的额外逻辑
    console.log('Drag change:', evt)
}

// 拖动结束 - 只在顺序真正改变时调用接口
const onDragEnd = (evt) => {
    isDragging.value = false
    currentDraggingItem.value = null

    const newOrder = zhinengtijianData.value.ItemList.map((item) => item.ID)
    console.log('Drag end, new order:', newOrder)

    // 检查顺序是否真的改变了
    const hasOrderChanged = !arraysEqual(originalOrder.value, newOrder)

    if (hasOrderChanged) {
        console.log('Order changed, calling API...')
        const data = zhinengtijianData.value.ItemList.map((i, index) => {
            return {
                ID: i.ID,
                OrderBy: index + 1
            }
        })
        loadingStore.showFullLoading = true
        UpdateOrderByAsyncApi(data)
            .then((res) => {
                loadingStore.showFullLoading = false
                if (res?.Code == '200') {
                    getZhiJjianDetail()
                } else {
                    ElMessage.error(res?.Message || '顺序保存失败')
                }
            })
            .catch((e) => {
                loadingStore.showFullLoading = false
                console.log(e)
            })
    } else {
        console.log('Order not changed, skipping API call')
    }
}

// 比较两个数组是否相等
const arraysEqual = (arr1, arr2) => {
    if (arr1.length !== arr2.length) return false
    for (let i = 0; i < arr1.length; i++) {
        if (arr1[i] !== arr2[i]) return false
    }
    return true
}

// 展开、收起全部
const doAllToggle = () => {
    toggleOpen.value = !toggleOpen.value
    zhinengtijianData.value?.ItemList?.forEach(
        (i) => (i.isOpen = toggleOpen.value)
    )
}

// 已勾选的选项
const checkedList = computed(() => {
    return zhinengtijianData.value.ItemList?.map((i, idx) => {
        return {
            ...i,
            orderNumber: idx + 1
        }
    }).filter((j) => j.isChecked)
})

// 全部重置
const doReset = () => {
    emits('openReset')
}

// 反馈
const doFanKui = () => {
    emits('openFanKui', checkedList.value)
}

// 新增结果
const doAdd = () => {
    emits('openEdit')
}

// 合并
const doMerge = () => {
    if (!checkedList.value.length) {
        ElMessage.error('请选择需要合并的结果')
        return
    }
    const data = {
        LabelName: '',
        HealthAdvice: '',
        Reason: '',
        OldIDs: ''
    }
    checkedList.value.forEach((i, index) => {
        data.LabelName +=
            i.LabelName + (index < checkedList.value.length - 1 ? ',' : '')
        data.HealthAdvice +=
            i.formData.HealthAdvice +
            (index >= checkedList.value.length - 1 ? '' : '\n')
        data.Reason +=
            i.formData.Reason +
            (index >= checkedList.value.length - 1 ? '' : '\n')
        data.OldIDs += i.ID + (index < checkedList.value.length - 1 ? ',' : '')
    })
    emits('openEdit', { ...data, isMerge: true })
}

// 编辑单个体检结果
const doEdit = (item) => {
    // 如果有正在编辑的先保存
    const isHaveEdit = zhinengtijianData.value.ItemList?.some((i) => i.isEdit)
    if (isHaveEdit && !item.isEdit) {
        ElMessage.error('请先保存修改内容')
        return
    }
    // 如果正在编辑状态
    if (item.isEdit) {
        if (!item.formData.HealthAdvice2 || !item.LabelName2) {
            ElMessage.error('请完成未填项')
            return
        }
        loadingStore.showFullLoading = true
        const data = {
            OperationType: 0, // 0编辑  1新增
            IsManually: 1, // 是否手动编辑  0下拉框选择  1手工填写
            KnowledgeItemID: item.ID, // 体检报告明细ID（编辑时传入，新增可为0）
            InstanceID: item.InstanceID, // 标签实例ID（唯一标识一个结论项）
            LabelName: item.LabelName2, // 标签名称（如：高胆固醇、甲状腺结节）
            LabelValue: item.LabelValue, // 标签值（检测值+单位，如：6.8 mmol/L）
            HealthAdvice: item.formData.HealthAdvice2,
            Reason: item.formData.Reason,
            OldIDs: '', // 合并时，旧ID，逗号分割
            HealthCheckupID: zhinengtijianData.value.HealthCheckupID, // 体检ID（关联体检记录）
            KnowledgeID: zhinengtijianData.value.KnowledgeID, // 体检报告ID（知识库主表ID）
            VersionID: zhinengtijianData.value.VersionID // 版本ID（用于版本控制）
        }
        SaveKnowledgeItemDataAsyncApi(data)
            .then((res) => {
                loadingStore.showFullLoading = false
                if (res?.Code == '200') {
                    ElMessage.success('保存成功')
                    item.isEdit = false
                    close()
                    getZhiJjianDetail()
                } else {
                    ElMessage.error(res.Message)
                }
            })
            .catch((e) => {
                console.log(e)
                loadingStore.showFullLoading = false
            })
    } else {
        // 编辑
        item.isEdit = true
        item.LabelName2 = item.LabelName || ''
        item.formData.HealthAdvice2 = item.HealthAdvice || ''
        item.formColumn = [
            {
                prop: 'HealthAdvice2',
                label: '健康建议',
                componentName: 'input',
                type: 'textarea',
                istrim: false,
                span: 24
            }
        ]
    }
}

// 取消
const doCancel = (item) => {
    item.isEdit = false
    item.formColumn = [
        {
            prop: 'HealthAdvice',
            label: '健康建议',
            componentName: 'plaintext',
            type: 'textarea',
            istrim: false,
            style: {
                'white-space': 'pre-line',
                'line-height': '18px'
            },
            span: 24
        }
    ]
}

// 复制
const doCopy = async (command) => {
    if (!checkedList.value?.length) {
        ElMessage.error('请选择需要复制的数据')
        return
    }
    let text = ''
    // 执行复制操作
    checkedList.value.forEach((i, index) => {
        switch (command) {
            case 'all':
                // 复制全部
                text += i.LabelName + '\n'
                text += i.formData.HealthAdvice + '\n'
                text +=
                    i.formData.Reason +
                    (index >= checkedList.value.length - 1 ? '' : '\n')
                break
            case 'result':
                // 复制结果
                text +=
                    i.LabelName +
                    (index >= checkedList.value.length - 1 ? '' : '\n')
                break
            case 'healthy':
                // 复制健康建议
                text +=
                    i.formData.HealthAdvice +
                    (index >= checkedList.value.length - 1 ? '' : '\n')
                break
            case 'judge':
                // 复制判断依据
                text +=
                    i.formData.Reason +
                    (index >= checkedList.value.length - 1 ? '' : '\n')
                break
        }
    })

    try {
        await toClipboard(text)
        // 复制成功
        ElMessage.success('复制成功')
    } catch (error) {
        // 复制失败
        console.log(error)
        ElMessage.error('复制失败')
    }
}

const doChangeCheckAll = (val) => {
    zhinengtijianData.value?.ItemList?.forEach((i) => (i.isChecked = val))
}

const print = (e) => {
    console.log(e)
}

watch(
    () => checkedList.value?.length,
    (val) => {
        if (val && val == zhinengtijianData.value?.ItemList?.length) {
            allChecked.value = true
        } else {
            allChecked.value = false
        }
    }
)

watch(
    () => zhinengtijianData.value,
    () => {
        toggleOpen.value = true
        zhinengtijianData.value?.ItemList?.forEach((i) => {
            i.isOpen = true
            i.isChecked = false
            i.isEdit = false
            i.formData = {
                HealthAdvice: i.HealthAdvice || '',
                Reason: i.Reason || ''
            }
            i.formColumn = [
                {
                    prop: 'HealthAdvice',
                    label: '健康建议',
                    componentName: 'plaintext',
                    type: 'textarea',
                    istrim: false,
                    style: {
                        'white-space': 'pre-line',
                        'line-height': '18px'
                    },
                    span: 24
                }
            ]
        })
    }
)
</script>

<style lang="scss">
.bg-img1 {
    background: url(../../../assets/bg-header-img1.png) top left no-repeat;
    background: url(../../../assets/bg-img1.png) top left no-repeat;
    background-size: 100%;
    background-color: #c4ddfe;
}

.drag-handle-main {
    cursor: move;
    user-select: none;
}

.drag-handle-item {
    cursor: move;
    user-select: none;

    .no-drag {
        cursor: default !important;
    }
}

.no-drag {
    cursor: default !important;
}

/* 防止拖拽时选中文字 */
.draggable-container * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 允许表单区域选中文字 */
.no-drag,
.el-input,
.el-textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.draggableResizable {
    border-radius: 10px;
    position: absolute;
    z-index: 1;
    top: 0;
    background: #ffffff;
    border: 1px solid #e4e7ed;
}

/* 恢复并优化 resize 手柄样式 */
.vdr-handle {
    position: absolute;
    box-sizing: border-box;
    background: transparent;
    border: none;
}

/* 左右边手柄 - 覆盖整个高度 */
.vdr-handle-ml,
.vdr-handle-mr {
    height: 100%;
    width: 8px;
    top: 0 !important;
    cursor: ew-resize;
    background: transparent;
}

.vdr-handle-ml {
    left: -4px !important;
}

.vdr-handle-mr {
    right: -4px !important;
}

/* 上下边手柄 - 覆盖整个宽度 */
.vdr-handle-tm,
.vdr-handle-bm {
    left: 0;
    width: 100%;
    height: 8px;
    cursor: ns-resize;
    background: transparent;
}

.vdr-handle-tm {
    top: -4px !important;
}

.vdr-handle-bm {
    bottom: -4px !important;
}

/* 角手柄 */
.vdr-handle-tl,
.vdr-handle-tr,
.vdr-handle-bl,
.vdr-handle-br {
    width: 16px;
    height: 16px;
    cursor: nwse-resize;
    background: transparent;
    border-radius: 50%;
}

.vdr-handle-tl {
    top: -8px !important;
    left: -8px !important;
    cursor: nw-resize;
}

.vdr-handle-tr {
    top: -8px !important;
    right: -8px !important;
    cursor: ne-resize;
}

.vdr-handle-bl {
    bottom: -8px !important;
    left: -8px !important;
    cursor: sw-resize;
}

.vdr-handle-br {
    bottom: -8px !important;
    right: -8px !important;
    cursor: se-resize;
}

/* 鼠标悬停时显示手柄 */
.draggableResizable:hover .vdr-handle-ml,
.draggableResizable:hover .vdr-handle-mr,
.draggableResizable:hover .vdr-handle-tm,
.draggableResizable:hover .vdr-handle-bm,
.draggableResizable:hover .vdr-handle-tl,
.draggableResizable:hover .vdr-handle-tr,
.draggableResizable:hover .vdr-handle-bl,
.draggableResizable:hover .vdr-handle-br {
    background: transparent;
    transition: background 0.2s ease;
}

/* 激活状态的手柄样式 */
.vdr-container.active .vdr-handle-ml,
.vdr-container.active .vdr-handle-mr,
.vdr-container.active .vdr-handle-tm,
.vdr-container.active .vdr-handle-bm,
.vdr-container.active .vdr-handle-tl,
.vdr-container.active .vdr-handle-tr,
.vdr-container.active .vdr-handle-bl,
.vdr-container.active .vdr-handle-br {
    background: transparent;
}

/* 移除 resize 时的虚线和边框 */
.vdr-container.active {
    border: 1px solid transparent !important;
    outline: none !important;
}

.vdr-container.dragging {
    // border: 1px solid #409eff !important;
    outline: none !important;
}

.vdr-container.resizing {
    // border: 1px solid #409eff !important;
    outline: none !important;
}

/* 优化拖拽视觉效果 - 增强版 */
.sortable-ghost {
    opacity: 0.7;
    background: linear-gradient(135deg, #e6f3ff 0%, #f0f7ff 100%);
    border: 1px dashed #409eff !important;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(64, 158, 255, 0.3);
    transform: scale(1.02) rotate(1deg);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
}

.sortable-chosen {
    opacity: 0.9;
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f3ff 100%);
    transform: scale(1.03);
    box-shadow: 0 12px 30px rgba(64, 158, 255, 0.25);
    border-color: #409eff !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
}

.sortable-drag {
    opacity: 0.95;
    transform: scale(1.05) rotate(2deg) !important;
    box-shadow: 0 16px 40px rgba(64, 158, 255, 0.35) !important;
    cursor: grabbing !important;
    z-index: 10001;
    border: 2px solid #409eff !important;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 列表项的基础过渡效果 */
.draggable-container .item-container {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}

/* 拖拽手柄的悬停效果 */
.drag-handle-item:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    transition: all 0.2s ease;
}

.drag-handle-item:hover .icon-[material-symbols--drag-pan] {
    color: #1e40af;
    transform: scale(1.1) rotate(5deg);
    transition: all 0.2s ease;
}

/* 确保拖拽手柄区域不会选中文字 */
.icon-[material-symbols--drag-pan] {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    transition: all 0.2s ease;
}

/* 拖拽过程中的项目样式 */
.dragging-item {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease;
}

/* 优化滚动区域 */
.draggable-container .overflow-y-auto {
    scroll-behavior: smooth;
}

/* 拖拽时的占位符样式优化 */
.sortable-fallback {
    opacity: 0 !important;
}

/* 拖拽时的滚动优化 */
.draggable-container {
    -webkit-overflow-scrolling: touch;
}

/* 移动端优化 */
@media (max-width: 768px) {
    .sortable-drag {
        transform: scale(1.02) !important;
    }

    .sortable-ghost {
        transform: scale(1.01) !important;
    }

    /* 移动端调整手柄大小 */
    .vdr-handle-ml,
    .vdr-handle-mr {
        width: 12px;
    }

    .vdr-handle-tm,
    .vdr-handle-bm {
        height: 12px;
    }

    .vdr-handle-tl,
    .vdr-handle-tr,
    .vdr-handle-bl,
    .vdr-handle-br {
        width: 20px;
        height: 20px;
    }
}

/* 高性能动画优化 */
.draggable-container * {
    will-change: transform, opacity;
}

/* 拖拽时的层级管理 */
.draggable-container .sortable-ghost,
.draggable-container .sortable-chosen,
.draggable-container .sortable-drag {
    position: relative;
    z-index: 10000;
}
</style>
